import * as React from 'react';
import {
    TouchableWithoutFeedback,
    StyleSheet,
    Dimensions,
    Text,
    View, Image
} from 'react-native'
import {useNavigation} from '@react-navigation/native'
import theme from '../../../config/theme'
/**
 * 这个是我们viewItem视图卡片
 * */
function ListViewCard(data: HomeFlatList.listItem) {
    const nav = useNavigation()
    return (
        <View style={styles.container}>
            {
                data.title ? (
                    <View style={styles.head}>
                        <Text style={styles.subTitle}>{data.title || ''}</Text>
                        <TouchableWithoutFeedback>
                            <Text style={styles.extra}>更多</Text>
                        </TouchableWithoutFeedback>
                    </View>
                ) : null
            }
            <View style={styles.body}>
                {
                    Array.isArray(data.content) && data.content.map((item, index) => {
                        return (
                            <TouchableWithoutFeedback key={index} onPress={() => nav.navigate('VideoInfo')}>
                                <View style={styles.item} key={index}>
                                    <Image
                                        style={{width: '100%', height: 175}}
                                        source={{uri: item.url}}
                                    />
                                    <Text style={styles.itemTitle}>{item.title}</Text>
                                    <Text numberOfLines={1} style={styles.itemDes}>{item.des}</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        )
                    })
                }
            </View>
        </View>
    )
}

const {width} = Dimensions.get('window')
const styles = StyleSheet.create({
    container: {},
    head: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingHorizontal: 10,
        paddingVertical: 10
    },
    subTitle: {
        fontSize: 18,
        fontWeight: "bold"
    },
    extra: {
        fontSize: 14,
        color: theme.deepGrey
    },
    body: {
        display: "flex",
        flexDirection: "row",
        flexWrap: "wrap",
        paddingHorizontal: 7.5,
    },
    item: {
        width: (width - 15) / 3,
        marginBottom: 10,
        paddingHorizontal: 2.5,
    },
    itemTitle: {
        marginVertical: 5
    },
    itemDes: {
        fontSize: 12,
        color: theme.shallowGrey
    }
})

export default ListViewCard
